<template>
	<view>
		<view class="shopDetailsBox">
			<view :class="{'active':shapStepInd==0}" @click="choseShapStep(0)">店铺信息</view>
			<view :class="{'active':shapStepInd==1}" @click="choseShapStep(1)">店铺材料</view>
			<view :class="{'active':shapStepInd==2}" @click="choseShapStep(2)">收货地址</view>
			<view :class="{'active':shapStepInd==3}" @click="choseShapStep(3)">店铺礼包</view>
		</view>
		<view class="upgradeVipBox" v-if="shapStepInd==0">
			<view class='addAddress'>
				<view class='list'>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'><em style="color:#f00;margin-right:10rpx;">*</em>店铺名称</view>
						<input type='text' placeholder='请输入店铺名称' name='shopName' v-model="registInfoMember.shopName"
							placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'><em style="color:#f00;margin-right:10rpx;">*</em>店铺注册号</view>
						<input type='text' placeholder='请输入店铺注册号' name='regShopNum'
							v-model="registInfoMember.regShopNum" placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'><em style="color:#f00;margin-right:10rpx;">*</em>店铺电话</view>
						<input type='number' placeholder='请输入店铺电话' name="shopMobile"
							v-model='registInfoMember.shopMobile' placeholder-class='placeholder' pattern="\d*"></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='shopType'><em style="color:#f00;margin-right:10rpx;">*</em>店铺类型</view>
						<picker v-model="registInfoMember.shopTypeIndex" mode='selector' :range="StoreType"
							name="shopType" @change="bindPickerChange" range-key='name'>
							<view class="uni-input pickerView" v-if="registInfoMember.shopTypeIndex!==''">
								{{StoreType[registInfoMember.shopTypeIndex].name}}
							</view>
							<view v-else style="color:#ccc;">
								请选择店铺类型
							</view>
						</picker>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'><em style="color:#f00;margin-right:10rpx;">*</em>代理省份</view>
						<view class="address">
							<picker mode="selector" @change="bindRegionChange_province" range-key="regionName"
								:range="provinceList">
								<view class='acea-row'>
									<view class="picker" v-if="provinceIndex==null" style="color:#ccc;">请选择代理省份</view>
									<view class="picker" v-if="provinceIndex!==null">
										{{provinceList[provinceIndex].regionName}}
									</view>
									<view class='iconfont icon-dizhi font-color'></view>
								</view>
							</picker>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'><em style="color:#f00;margin-right:10rpx;">*</em>代理城市</view>
						<view class="address">
							<picker mode="selector" @change="bindRegionChange_city" range-key="regionName"
								:range="cityList">
								<view class='acea-row'>
									<view class="picker" v-if="cityIndex==null" style="color:#ccc;">请选择代理城市</view>
									<view class="picker" v-if="cityIndex!==null">{{cityList[cityIndex].regionName}}
									</view>
									<view class='iconfont icon-dizhi font-color'></view>
								</view>
							</picker>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'><em style="color:#f00;margin-right:10rpx;">*</em>代理区县</view>
						<view class="address">
							<picker mode="selector" @change="bindRegionChange_county" range-key="regionName"
								:range="countyList">
								<view class='acea-row'>
									<view class="picker" v-if="countyIndex==null" style="color:#ccc;">请选择代理区县</view>
									<view class="picker" v-if="countyIndex!==null">
										{{countyList[countyIndex].regionName}}
									</view>
									<view class='iconfont icon-dizhi font-color'></view>
								</view>
							</picker>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'><em style="color:#f00;margin-right:10rpx;">*</em>代理地址</view>
						<input type='text' placeholder='请填写代理地址' name='dlAddress' placeholder-class='placeholder'
							v-model='registInfoMember.dlAddress'></input>
					</view>
				</view>
			</view>
		</view>
		<view v-if="shapStepInd==1">
			<view style="position:relative;background:#fff;">
				<view class="detailsBox">
					<view class="switchTab_details">
						<scroll-view scroll-y="true" style="height:100%">
							<view class="unloadIdCardTitle">请上传您的店铺材料</view>
							<view class="unloadIdCardBox">
								<view>
									<view class="uploadBox">
										<view class="uploadBox_defaultBox">
											<image src="/static/images/uploadBorder.png" class="borderBox borderLeft">
											</image>
											<image src="/static/images/uploadBorder.png" class="borderBox borderRight">
											</image>
											<image src="/static/images/uploadBorder.png" class="borderBox borderLeft1">
											</image>
											<image src="/static/images/uploadBorder.png" class="borderBox borderRight1">
											</image>
											<view class="IDCardBox">
												<image
													:src="registInfoMember.show_idCardImg1!==''?registInfoMember.show_idCardImg1:'/static/images/frontIDCardDefault.png'">
												</image>
											</view>
										</view>
									</view>
									<view class="uploadTitle" @click="unloadImage(1)">上传身份证正面</view>
								</view>
								<view>
									<view class="uploadBox">
										<view class="uploadBox_defaultBox">
											<image src="/static/images/uploadBorder.png" class="borderBox borderLeft">
											</image>
											<image src="/static/images/uploadBorder.png" class="borderBox borderRight">
											</image>
											<image src="/static/images/uploadBorder.png" class="borderBox borderLeft1">
											</image>
											<image src="/static/images/uploadBorder.png" class="borderBox borderRight1">
											</image>
											<view class="IDCardBox">
												<image
													:src="registInfoMember.show_idCardImg2!==''?registInfoMember.show_idCardImg2:'/static/images/reverseSideIDCardDefault.png'">
												</image>
											</view>
										</view>
									</view>
									<view class="uploadTitle" @click="unloadImage(2)">上传身份证反面</view>
								</view>
								<view>
									<view class="uploadBox">
										<view class="uploadBox_defaultBox">
											<image src="/static/images/uploadBorder.png" class="borderBox borderLeft">
											</image>
											<image src="/static/images/uploadBorder.png" class="borderBox borderRight">
											</image>
											<image src="/static/images/uploadBorder.png" class="borderBox borderLeft1">
											</image>
											<image src="/static/images/uploadBorder.png" class="borderBox borderRight1">
											</image>
											<view class="IDCardBox">
												<image
													:src="registInfoMember.show_businessImg!==''?registInfoMember.show_businessImg:'/static/images/reverseSideIDCardDefault.png'">
												</image>
											</view>
										</view>
									</view>
									<view class="uploadTitle" @click="unloadImage(3)">上传营业执照</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>

		</view>
		<view v-if="shapStepInd==2">
			<view class='addAddress'>
				<view class='list'>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'><em style="color:#f00;margin-right:10rpx;">*</em>收货人姓名</view>
						<input type='text' placeholder='请输入收货人姓名' v-model="orders.consigneeName"
							placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'><em style="color:#f00;margin-right:10rpx;">*</em>收货人电话</view>
						<input type='number' placeholder='请输入收货人电话'
							v-model="orders.consigneeMobile" placeholder-class='placeholder' pattern="\d*"></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'><em style="color:#f00;margin-right:10rpx;">*</em>收货省份</view>
						<view class="address">
							<picker mode="selector" @change="bindRegionChange_province_SH" range-key="regionName"
								:range="provinceList_SH">
								<view class='acea-row'>
									<view class="picker" v-if="provinceIndex_SH==null" style="color:#ccc;">请选择收货省份</view>
									<view class="picker" v-if="provinceIndex_SH!==null">
										{{provinceList_SH[provinceIndex_SH].regionName}}
									</view>
									<view class='iconfont icon-dizhi font-color'></view>
								</view>
							</picker>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'><em style="color:#f00;margin-right:10rpx;">*</em>收货城市</view>
						<view class="address">
							<picker mode="selector" @change="bindRegionChange_city_SH" range-key="regionName"
								:range="cityList_SH">
								<view class='acea-row'>
									<view class="picker" v-if="cityIndex_SH==null" style="color:#ccc;">请选择收货城市</view>
									<view class="picker" v-if="cityIndex_SH!==null">{{cityList_SH[cityIndex_SH].regionName}}
									</view>
									<view class='iconfont icon-dizhi font-color'></view>
								</view>
							</picker>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'><em style="color:#f00;margin-right:10rpx;">*</em>收货区县</view>
						<view class="address">
							<picker mode="selector" @change="bindRegionChange_county_SH" range-key="regionName"
								:range="countyList_SH">
								<view class='acea-row'>
									<view class="picker" v-if="countyIndex_SH==null" style="color:#ccc;">请选择收货区县</view>
									<view class="picker" v-if="countyIndex_SH!==null">
										{{countyList_SH[countyIndex_SH].regionName}}
									</view>
									<view class='iconfont icon-dizhi font-color'></view>
								</view>
							</picker>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'><em style="color:#f00;margin-right:10rpx;">*</em>收货地址</view>
						<input type='text' placeholder='请填写收货地址' name='dlAddress' placeholder-class='placeholder'
							v-model="orders.consigneeAddress"></input>
					</view>
				</view>
			</view>
		</view>
		<view v-if="shapStepInd==3">
			<view class="packageInfoBox">
				<view class="MinimumAmountBox"><em style="color:#f00;margin-right:20rpx;">*</em>本店铺最低购买金额：¥{{MinimumAmount}}</view>
				<view v-for="(ele,ind) in packageInfoList" :key="ind" class="packageInfoItem">
					<view>
						<view class="packageInfoName">{{ele.PACKAGE_NAME}}</view>
						<view class="packageInfoItemCont">
							<view>商品编号</view>
							<view>{{ele.PACKAGE_CODE}}</view>
						</view>
						<view class="packageInfoItemCont">
							<view>价格</view>
							<view>¥{{ele.PRICE}}</view>
						</view>
						<view class="packageInfoItemCont">
							<view>金额</view>
							<view style="position:relative">
								¥{{ele.totalNum}}
								<view class="purchaseQtyBox">
									<view class="reduce"  @click="reduceFun(ele)" :class="{'non':ele.purchaseQty==0}">-</view>
									<view class="num">{{ele.purchaseQty}}</view>
									<view class="plus" @click="plusFun(ele)">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot acea-row row-between-wrapper" v-if="shapStepInd==3">
			<view>
				<view>总金额：¥{{packageTotalNumber}}</view>
				<view class='keepBnt bg-color' @click="formSubmit">升级</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRegionListByParentId,
		getShopLevel,
		getShopPackageList,
		setShopUpSubmit
	} from '@/api/directSelling.js'
	import {
		HTTP_REQUEST_URL_ZX
	} from "@/config/app_member.js"
	import store from "@/store/index.js"
	export default {
		data() {
			return {
				shapStepInd: 0,
				StoreType: [{ //是非选项
					name: "服务站",
					value: "1"
				}, {
					name: "专营店",
					value: "2"
				}, {
					name: "旗舰店",
					value: "3"
				}],
				registInfoMember: {
					shopName: null, // 店铺名称   必填
					regShopNum: null, // 店铺注册号   必填
					idCardImg1: "", // 身份证照片 正面   必填
					idCardImg2: "", // 身份证照片 反面   必填
					businessImg: "", // 营业执照图片  必填
					show_idCardImg1: "", // 身份证照片 正面   必填
					show_idCardImg2: "", // 身份证照片 反面   必填
					show_businessImg: "", // 营业执照图片  必填
					dlProvince: null, // 代理省   必填
					dlCity: null, // 代理市   必填
					dlDistrict: null, // 代理县   必填
					dlAddress: null, // 代理地址
					shopMobile: null, // 店铺电话   必填
					shopType: "", // 店铺级别  1服务站   2专营店  3旗舰店
					shopTypeIndex: "",
				},
				orders:{
					consigneeName: "",//收货人姓名
					consigneeMobile: "", //收货人电话
					consigneeCountryId: "1",//国家id
					consigneeProvinceId: "", 
					consigneeCityId: "", 
					consigneeDistrictId: "", 
					consigneeAddress: "",//收货地址
				},
				MinimumAmount:0,//最低金额
				packageTotalNumber:0,
				packageInfoList:[],
				//店铺信息
				provinceList: [],
				cityList: [],
				countyList: [],
				provinceIndex: null,
				cityIndex: null,
				countyIndex: null,
				provinceId: null,
				cityId: null,
				countyId: null,
				//收货信息
				provinceList_SH: [],
				cityList_SH: [],
				countyList_SH: [],
				provinceIndex_SH: null,
				cityIndex_SH: null,
				countyIndex_SH: null,
				provinceId_SH: null,
				cityId_SH: null,
				countyId_SH: null,
			};
		},
		onLoad(options) {
			this.getProvinceList(1, 'province');
			this.getProvinceList_SH(1, 'province');
			
		},
		methods: {
			bindPickerChange(e) {
				this.registInfoMember.shopTypeIndex = e.target.value;
				this.registInfoMember.shopType = this.StoreType[this.registInfoMember.shopTypeIndex].value;
			},
			choseShapStep(type) {
				if(type==3){//店铺礼包
					if(!this.registInfoMember.shopType){
						this.$util.Tips({
							title: '请选择店铺类型'
						});
					}else{
						if(this.registInfoMember.shopType==1){
							this.getShopLevel();
							this.shapStepInd = type;
							this.getShopPackageList();
						}else if(this.registInfoMember.shopType==2){
							if(!this.registInfoMember.dlDistrict){
								this.$util.Tips({
									title: '请选择代理省份'
								});
							}else{
								this.getShopLevel();
								this.shapStepInd = type;
								this.getShopPackageList();
							}
						}else if(this.registInfoMember.shopType==3){
							if(!this.registInfoMember.dlCity){
								this.$util.Tips({
									title: '请选择代理城市'
								});
							}else{
								this.getShopLevel();
								this.shapStepInd = type;
								this.getShopPackageList();
							}
						}
					}
					
				}else{
					this.shapStepInd = type;
				}
			},
			unloadImage(type) {
				let that = this;
				uni.chooseImage({
					count: 1, //最多可以选择的图片总数
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有  
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
					success: function(res) {
						let file = res.tempFiles[0];
						uni.uploadFile({
							url: HTTP_REQUEST_URL_ZX + "/h5/changeMemberInfoImage",
							filePath: res.tempFilePaths[0],
							fileType: "image",
							name: "file",
							formData: {
								'filename': "file",
								"chunk": 0
							},
							header: {
								// #ifdef MP
								"Content-Type": "multipart/form-data",
								// #endif
								"JWT-token": store.state.app.member_token
							},
							success: function(res) {
								let imgData = JSON.parse(res.data);
								if (type == 1) { //上传正面
									that.registInfoMember.show_idCardImg1 = imgData.url;
									that.registInfoMember.idCardImg1 = imgData.imgName;
								} else if (type == 2) { //上传背面
									that.registInfoMember.show_idCardImg2 = imgData.url;
									that.registInfoMember.idCardImg2 = imgData.imgName;
								} else if (type == 3) { //上传营业执照
									that.registInfoMember.show_businessImg = imgData.url;
									that.registInfoMember.businessImg = imgData.imgName;
								}
							}
						})

					},
				})
			},
			getProvinceList(parentId, listType) {
				getRegionListByParentId({
					parentId: parentId
				}).then((res) => {
					let data = res.data;
					if (listType == 'province') { //省
						this.provinceList = data;
						this.cityList = [];
						this.countyList = [];
						this.provinceId = null;
						this.cityId = null;
						this.countyId = null;
						this.provinceIndex = null;
						this.cityIndex = null;
						this.countyIndex = null;
						this.registInfoMember.dlProvince = null;
						this.registInfoMember.dlCity = null;
						this.registInfoMember.dlDistrict = null;
					} else if (listType == 'city') { //市
						this.cityList = data;
						this.countyList = [];
						this.cityId = null;
						this.countyId = null;
						this.cityIndex = null;
						this.countyIndex = null;
						this.registInfoMember.dlCity = null;
						this.registInfoMember.dlDistrict = null;
					} else if (listType == 'county') { //区
						this.countyList = data;
						this.countyId = null;
						this.countyIndex = null;
						this.registInfoMember.dlDistrict = null;
					}
					
				})
			},
			getProvinceList_SH(parentId, listType) {
				getRegionListByParentId({
					parentId: parentId
				}).then((res) => {
					let data = res.data;
					if (listType == 'province') { //省
						this.provinceList_SH = data;
						this.cityList_SH = [];
						this.countyList_SH = [];
						this.provinceId_SH = null;
						this.cityId_SH = null;
						this.countyId_SH = null;
						this.provinceIndex_SH = null;
						this.cityIndex_SH = null;
						this.countyIndex_SH = null;
					} else if (listType == 'city') { //市
						this.cityList_SH = data;
						this.countyList_SH = [];
						this.cityId_SH = null;
						this.countyId_SH = null;
						this.cityIndex_SH = null;
						this.countyIndex_SH = null;
					} else if (listType == 'county') { //区
						this.countyList_SH = data;
						this.countyId_SH = null;
						this.countyIndex_SH = null;
					}
				})
			},
			bindRegionChange_province(e) {
				this.provinceIndex = e.detail.value;
				this.provinceId = this.provinceList[this.provinceIndex].regionId;
				this.getProvinceList(this.provinceId, 'city');
				this.registInfoMember.dlProvince = this.provinceId;
			},
			bindRegionChange_city(e) {
				this.cityIndex = e.detail.value;
				this.cityId = this.cityList[this.cityIndex].regionId;
				this.getProvinceList(this.cityId, 'county');
				this.registInfoMember.dlCity = this.cityId;
			},
			bindRegionChange_county(e) {
				this.countyIndex = e.detail.value;
				this.countyId = this.countyList[this.countyIndex].regionId;
				this.registInfoMember.dlDistrict = this.countyId;
			},
			bindRegionChange_province_SH(e) {
				this.provinceIndex_SH = e.detail.value;
				this.provinceId_SH = this.provinceList_SH[this.provinceIndex_SH].regionId;
				this.getProvinceList_SH(this.provinceId_SH, 'city');
			},
			bindRegionChange_city_SH(e) {
				this.cityIndex_SH = e.detail.value;
				this.cityId_SH = this.cityList_SH[this.cityIndex_SH].regionId;
				this.getProvinceList_SH(this.cityId_SH, 'county');
			},
			bindRegionChange_county_SH(e) {
				this.countyIndex_SH = e.detail.value;
				this.countyId_SH = this.countyList_SH[this.countyIndex_SH].regionId;
			},
			getShopPackageList(){
				getShopPackageList({
					countryId:1,
					saleType:this.registInfoMember.shopType?this.registInfoMember.shopType:1
				}).then((res)=>{
					let data=res.data;
					data.forEach((ele,ind)=>{
						ele.purchaseQty=0;
						ele.totalNum=0;
					})
					this.packageInfoList=data;
					this.getTotalNumber();
				})
			},
			//获取店铺礼包最低购买金额
			getShopLevel(){
				let parentId=-1;
				if(this.registInfoMember.shopType==1){
					parentId=-1;
				}else if(this.registInfoMember.shopType==2){
					parentId=this.registInfoMember.dlDistrict;
				}else if(this.registInfoMember.shopType==3){
					parentId=this.registInfoMember.dlCity;
				}
				getShopLevel(parentId).then((res)=>{
					let data=res.data;
					this.MinimumAmount=data;
				})
			},
			reduceFun(ele){
				if(ele.purchaseQty>0){
					ele.purchaseQty=ele.purchaseQty-1;
					ele.totalNum=ele.purchaseQty*ele.PRICE;
					this.$forceUpdate();
					this.getTotalNumber();
				}
			},
			plusFun(ele){
				ele.purchaseQty=ele.purchaseQty+1;
				ele.totalNum=ele.purchaseQty*ele.PRICE;
				this.$forceUpdate();
				this.getTotalNumber();
			},
			getTotalNumber(){
				this.packageTotalNumber=0;
				this.packageInfoList.forEach(ele=>{
					this.packageTotalNumber=this.packageTotalNumber+ele.totalNum;
				})
			},
			/**
			 * 提交用户添加地址
			 * 
			 */
			formSubmit: function(e) {
				let that = this;
				this.registInfoMember.dlProvince = this.provinceId;
				this.registInfoMember.dlCity = this.cityId;
				this.registInfoMember.dlDistrict = this.countyId;
				this.orders.consigneeProvinceId = this.provinceId_SH;
				this.orders.consigneeCityId = this.cityId_SH;
				this.orders.consigneeDistrictId = this.countyId_SH;
				let member = this.registInfoMember;
				let orders=this.orders;
				let orderTotalAmounts=this.MinimumAmount;
				let packageInfo=[];
				this.packageInfoList.forEach((ele)=>{
					if(ele.purchaseQty>0){
						packageInfo.push({
							packageId:ele.ID,
							purchaseQty:ele.purchaseQty
						})
					}
				})
				if (!member.shopName) return that.$util.Tips({
					title: '请输入店铺名称'
				});
				if (!member.regShopNum) return that.$util.Tips({
					title: '请输入店铺注册号'
				});
				if (!member.shopMobile) return that.$util.Tips({
					title: '请输入店铺电话'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(member.shopMobile)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if (!member.shopType) return that.$util.Tips({
					title: '请选择店铺类型'
				});
				if (!member.dlProvince) return that.$util.Tips({
					title: '请选择代理省份'
				});
				if (!member.dlCity) return that.$util.Tips({
					title: '请选择代理城市'
				});
				if (!member.dlDistrict) return that.$util.Tips({
					title: '请选择代理区县'
				});
				if (!member.dlAddress) return that.$util.Tips({
					title: '请选择代理地址'
				});
				if (!member.idCardImg1) return that.$util.Tips({
					title: '请上传身份证正面材料'
				});
				if (!member.idCardImg2) return that.$util.Tips({
					title: '请上传身份证反面材料'
				});
				if (!member.businessImg) return that.$util.Tips({
					title: '请上传营业执照材料'
				});
				if (!orders.consigneeName) return that.$util.Tips({
					title: '请输入收货人姓名'
				});
				if (!orders.consigneeMobile) return that.$util.Tips({
					title: '请输入收货人电话'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(orders.consigneeMobile)) return that.$util.Tips({
					title: '请输入正确的收货人电话'
				});
				if (!orders.consigneeProvinceId) return that.$util.Tips({
					title: '请输入收货省份'
				});
				if (!orders.consigneeCityId) return that.$util.Tips({
					title: '请输入收货城市'
				});
				if (!orders.consigneeDistrictId) return that.$util.Tips({
					title: '请输入收货区县'
				});
				if (!orders.consigneeAddress) return that.$util.Tips({
					title: '请输入收货地址'
				});
				if(this.MinimumAmount>this.packageTotalNumber){
					return that.$util.Tips({
						title: '未超过店铺最低购买金额'
					});
				}
				setShopUpSubmit({
					member:member,
					orderTotalAmounts:orderTotalAmounts,
					orders:orders,
					packageInfo:packageInfo
				}).then((res)=>{
					
				}).catch((err)=>{
					
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	body,page{
		background:#fff;
	}
	.upgradeVipBox{
		margin-bottom:130rpx;
	}
	.shopDetailsBox {
		display: flex;
		background: #fff;
		border-bottom: 1px solid #ccc;

		view {
			flex: 1;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
		}

		view.active {
			background: $theme-color;
			color: #fff;
		}
	}

	.addAddress .list {
		background-color: #fff;
	}

	.addAddress .list .item {
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.addAddress .list .item .name {
		width: 195rpx;
		font-size: 30rpx;
		color: #333;
	}

	.addAddress .list .item .address {
		// width: 412rpx;
		flex: 1;
		margin-left: 20rpx;
	}

	.addAddress .list .item input {
		width: 475rpx;
		font-size: 30rpx;
	}

	.addAddress .list .item .placeholder {
		color: #ccc;
	}

	.addAddress .list .item picker {
		width: 475rpx;
		height: 42rpx;
	}

	.addAddress .list .item picker .picker {
		width: 410rpx;
		font-size: 30rpx;
	}

	.addAddress .list .item picker .iconfont {
		font-size: 43rpx;
	}

	.addAddress .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}

	.addAddress .default checkbox {
		margin-right: 15rpx;
	}


	.addAddress .wechatAddress {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: #fe960f;
		border: 1px solid #fe960f;
	}

	.foot {
		position: fixed;
		width: 100%;
		background-color: #fff;
		bottom: 0;
		height: 116rpx;
		border-top:1px solid #eee;
		>view{
			width:100%;
			display:flex;
			align-items: center;
			justify-content: space-between;
			padding:0 20rpx;
			box-sizing: border-box;
		}
		.keepBnt {
			width: 200rpx;
			height: 66rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 66rpx;
			font-size: 32rpx;
			color: #fff;
		}
	}

	.detailsBox {
		height: calc(100% - 0rpx);
		width: 100%;
		background: #fff;
		position: relative;
		padding: 0rpx 0rpx 56rpx 0;
		box-sizing: border-box;

		.switchTab {
			width: 100%;
			padding: 60rpx 28rpx 0 28rpx;
			line-height: 117rpx;
			box-sizing: border-box;
			position: relative;
			border-bottom: 1px solid #CCCCCC;

			.registrationTitle {
				height: 100%;
				width: 200rpx;
				line-height: 117rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				display: inline-block;
				color: #201332;
				font-size: 36rpx;
				font-weight: 500;

			}

			.switchItem {
				width: 145rpx;
				height: 117rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				display: inline-block;
				vertical-align: top;

				border: 1px solid rgba(0, 0, 0, .07);
				-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
				box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
				text-align: center;

				.switchItemIcon {
					width: 44rpx;
					height: 44rpx;
					background: #EEEEEE;
					margin: 0 auto;
					margin-top: 19rpx;
				}

				.switchItemTxt {
					font-size: 24rpx;
					color: #333333;
					font-weight: 500;
					line-height: 49rpx;
				}
			}

			.switchItem:last-child {
				margin-right: 29rpx;
			}

			.switchItem.active {
				border: none;
				background: linear-gradient(90deg, #4DBBB2, #59E1B3);

				.switchItemTxt {
					color: #fff;
				}
			}

			.after {
				position: absolute;
				bottom: 1rpx;
				left: 56rpx;
				/* 圆角的位置需要细心调试哦 */
				width: 0;
				height: 0;
				font-size: 0;
				border: solid 8px;
				border-color: rgb(102, 214, 174) transparent transparent transparent;
				z-index: 111;
			}
		}

		.switchTab_details {
			width: 100%;
			height: calc(100% - 185rpx);
			padding: 0 61rpx;
			box-sizing: border-box;

			.unloadIdCardTitle {
				color: #1B1B20;
				font-size: 30rpx;
				line-height: 105rpx;
				margin-bottom: 11rpx;
			}

			.unloadIdCardBox {
				width: 100%;
				height: auto;
				padding: 0 140rpx;
				box-sizing: border-box;

				.uploadBox {
					width: 100%;
					height: 281rpx;
					border-radius: 10rpx;
					position: relative;
					text-align: center;
					background: #F4F8FE;

					.uploadBox_defaultBox {
						width: 297rpx;
						height: 207rpx;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						padding: 27rpx;

						.IDCardBox {
							width: 100%;
							height: 100%;

							uni-image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.borderBox {
						width: 27rpx;
						height: 27rpx;

					}

					.borderLeft {
						position: absolute;
						left: 0;
						top: 0;
					}

					.borderRight {
						position: absolute;
						right: 0;
						top: 0;
						transform: rotate(90deg);
					}

					.borderLeft1 {
						position: absolute;
						bottom: 0;
						left: 0;
						transform: rotate(-90deg);
					}

					.borderRight1 {
						position: absolute;
						right: 0;
						bottom: 0;
						transform: rotate(180deg);
					}

					.uploadBox_cont {
						position: absolute;
						left: 50%;
						top: 50%;
						max-width: 100%;
						max-height: 100%;
						transform: translate(-50%, -50%);

					}
				}

				.uploadTitle {
					line-height: 77rpx;
					font-size: 28rpx;
					background: $theme-color;
					color: #fff;
					font-size: 34rpx;
					border-radius: 0px 0px 10rpx 10rpx;
					text-align: center;
					margin-bottom: 92rpx;
				}
			}

			.saveButton {
				width: 100%;
				height: 88rpx;
				background: #8273F5;
				border-radius: 38rpx;
				font-size: 30rpx;
				font-weight: 500;
				line-height: 88rpx;
				text-align: center;
				color: #fff;
				margin-top: 56rpx;
			}

		}
	}
	.packageInfoBox{
		.MinimumAmountBox{
			background:#fff;
			font-size:26rpx;
			padding:30rpx 30rpx 0 30rpx;
			box-sizing: border-box;
		}
		.packageInfoItem{
			width:100%;
			height:auto;
			background:#fff;
			margin-bottom:30rpx;
			padding:0 40rpx 20rpx 40rpx;
			box-sizing: border-box;
			font-size:28rpx;
			border-bottom:1px solid #eee;
			.packageInfoName{
				color:#000;
				font-size:30rpx;
				line-height:100rpx;
				font-weight: 500;
			}
			.packageInfoItemCont{
				line-height:80rpx;
				>view{
					display:inline-block;
					vertical-align: middle;
				}
				>view:nth-child(1){
					width:200rpx;
				}
				>view:nth-child(2){
					width:calc(100% - 200rpx);
					font-size:30rpx;
					.purchaseQtyBox{
						position:absolute;
						right:10rpx;
						top:0;
						>view{
							display:inline-block;
							vertical-align: middle;
						}
						>view.reduce{
							border:1rpx solid #a4a4a4;
							width:66rpx;
							height:42rpx;
							line-height:36rpx;
							text-align:center;
						}
						>view.num{
							border:1rpx solid #a4a4a4;
							width:66rpx;
							height:42rpx;
							line-height:36rpx;
							text-align:center;
							margin:0 1rpx;
						}
						>view.plus{
							border:1rpx solid #a4a4a4;
							width:66rpx;
							height:42rpx;
							line-height:36rpx;
							text-align:center;
						}
						>view.non{
							border:1rpx solid #e3e3e3;
							color:#dedede;
						}
					}
				}
			}
		}
	}
</style>
